<template>
  <div id="container">
    <div style="text-align:center;">
      <h3>教学任务修改</h3>
    </div>
    <table>
      <tr>
        <th>
          <span>教师工号：</span>
        </th>
        <th>
          <el-button type="text" style="width:100%;height:100%;font-size:18px;text-align:left;">
            <span>{{ tableData.teacher.id }}</span>
          </el-button>
        </th>
      </tr>
      <tr>
        <th>
          <span>教师：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openTeacherList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.teacher.name }}</span>
          </el-button>
        </th>
      </tr>
      <tr>
        <th>
          <span>学期：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openSemesterList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.semester.name }}</span>
          </el-button>
        </th>
      </tr>
      <tr>
        <th>
          <span>课程：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openCourseList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.course.name }}</span>
          </el-button>
        </th>
      </tr>
      <tr>
        <th>
          <span>班级：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openInstructionClassList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.class.name }}</span>
          </el-button>
        </th>
      </tr>
      <tr>
        <th></th>
        <th>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </th>
      </tr>
    </table>

    <!-- 学期筛选 -->
    <el-dialog title="选择学期" :visible.sync="openSemesterList">
      <el-input placeholder="请输入关键字" v-model="semesterKeyword">
        <template slot="prepend">学期名</template>
        <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="semesterSelect">
        <el-radio
          v-for="(semester, index) in semesterList"
          :key="'semester1' + index"
          :label="semester"
        >{{ semester.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="semesterSelect = '',semesterInit()">清 空</el-button>
        <el-button type="primary" @click="semesterSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 课程筛选 -->
    <el-dialog title="选择课程" :visible.sync="openCourseList">
      <el-input placeholder="请输入关键字" v-model="courseKeyword">
        <template slot="prepend">课程名</template>
        <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseSelect">
        <el-radio
          v-for="(course, index) in courseList"
          :key="'course1' + index"
          :label="course"
        >{{ course.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseSelect = '',courseInit()">清 空</el-button>
        <el-button type="primary" @click="courseSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 班级筛选 -->
    <el-dialog title="选择班级" :visible.sync="openInstructionClassList">
      <el-input placeholder="请输入关键字" v-model="instructionClassKeyword">
        <template slot="prepend">班级名</template>
        <el-button slot="append" icon="el-icon-search" @click="getClassByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="instructionClassSelect">
        <el-radio
          v-for="(instructionClass, index) in instructionClassList"
          :key="'instructionClass' + index"
          :label="instructionClass"
        >{{ instructionClass.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="instructionClassSelect = '',classInit()">清 空</el-button>
        <el-button type="primary" @click="instructionClassSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 教师筛选 -->
    <el-dialog title="选择教师" :visible.sync="openTeacherList">
      <el-input placeholder="请输入关键字" v-model="teacherKeyword">
        <template slot="prepend">教师名</template>
        <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="teacherSelect">
        <el-radio
          v-for="(teacher, index) in teacherList"
          :key="'teacher' + index"
          :label="teacher"
        >{{ teacher.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherSelect = '',teacherInit()">清 空</el-button>
        <el-button type="primary" @click="teacherSelected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllSemester } from "@/api/semester";
import { getAllTeacher } from "@/api/teacher";
import { getAllCourse } from "@/api/course";
import { getAllInstructionClass } from "@/api/instructionClass";

export default {
  name: "teachingTaskUpdate",
  props: {
    taskDetails: Object
  },
  data() {
    return {
      teacherList: [], //教师列表
      teacherSelect: "", //教师选择
      openTeacherList: false, //教师筛选框是否开启
      teacherKeyword: "", //教师筛选关键字

      instructionClassList: [], //班级列表
      instructionClassSelect: "", //班级
      openInstructionClassList: false, //班级筛选框是否开启
      instructionClassKeyword: "", //班级筛选关键字

      courseList: [], //课程列表
      courseSelect: "", //课程选择
      openCourseList: false, //课程筛选框是否开启
      courseKeyword: "", //课程筛选关键字

      semesterList: [], //学期列表
      semesterSelect: "", //学期选择
      openSemesterList: false, //学期筛选框是否开启
      semesterKeyword: "", //学期筛选关键字

      //表格的数据,初始数据是父组件传过来的数据
      tableData: {
        teacher: "", //教师
        semester: "", //学期
        class: "", //班级
        course: "" //课程名
      }
    };
  },
  created() {
    //表格数据初始化数据
    this.semesterInit();
    this.courseInit();
    this.classInit();
    this.teacherInit();

    //获取学期列表
    this.getAllSemester();
    //获取教师列表
    this.getAllTeacher();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
  },
  methods: {
    //初始化数据，把父组件传过来的数据绑定到表格数据
    semesterInit() {
      let id;
      let name;
      this.tableData.semester = {
        id: this.taskDetails.semesterId,
        name: this.taskDetails.semesterName
      };
    },
    courseInit() {
      let id;
      let name;
      this.tableData.course = {
        id: this.taskDetails.courseId,
        name: this.taskDetails.courseName
      };
    },
    classInit() {
      let id;
      let name;
      this.tableData.class = {
        id: this.taskDetails.instructionClassId,
        name: this.taskDetails.instructionClassName
      };
    },
    teacherInit() {
      let id;
      let name;
      this.tableData.teacher = {
        id: this.taskDetails.teacherId,
        name: this.taskDetails.teacherName
      };
    },

    //课程选择
    courseSelected() {
      if (this.courseSelect != "") {
        this.tableData.course = this.courseSelect;
      }
      this.openCourseList = false;
    },

    //学期选择
    semesterSelected() {
      if (this.semesterSelect != "") {
        this.tableData.semester = this.semesterSelect;
      }
      this.openSemesterList = false;
    },

    //班级选择
    instructionClassSelected() {
      if (this.instructionClassSelect != "") {
        this.tableData.class = this.instructionClassSelect;
      }
      this.openInstructionClassList = false;
    },

    //教师选择
    teacherSelected() {
      if (this.teacherSelect != "") {
        this.tableData.teacher = this.teacherSelect;
      }
      this.openTeacherList = false;
    },

    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    //根据关键词搜索班级
    getClassByKeyword() {},

    //根据关键词搜索教师
    getTeacherByKeyword() {},

    //还原初始值
    reset() {
      this.teacherInit(); //教师名
      this.semesterInit(); //学期
      this.classInit(); //班级名
      this.courseInit(); //课程名
    },

    //修改提交
    update() {
      this.$alert("修改授课意向表", "修改成功", {
        confirmButtonText: "确定",
        callback: action => {
          console.log(this.tableData);
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        }
      });
    },

    //返回
    back() {
      this.$emit("closeUpdate", false);
    },

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.tableTotal = res.data.semesterList.length;
        this.semesterList = res.data.semesterList;
      });
    },

    //获取教师列表
    getAllTeacher() {
      getAllTeacher().then(res => {
        this.teacherList = res.data.teacherList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then(res => {
        this.courseList = res.data.courseList;
      });
    },

    //获取授课班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then(res => {
        this.instructionClassList = res.data.instructionClassList;
      });
    }
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  margin: auto;
  font-size: 20px;
}
span {
  display: inline-block;
  width: 300px;
  font-weight: 500;
  text-align: right;
}
th {
  text-align: left;
}
.el-button span {
  text-align: left;
}
</style>
